<script setup></script>

<template>
  <div class="small home">
    <!-- <img src="@/assets/images/small/disclaimer-bg.png" /> -->
    <div class="title">Privacy & Disclaimer</div>
    <div class="content">
      <div class="row">
        To enhance your interactive experience, this system may capture your
        photo or real-time image to generate AI-created avatars.
      </div>
      <div class="row">
        By participating, you consent to the use of your image for this
        transformation process. While we strive to ensure accuracy, the final
        avatar may not precisely represent your likeness.
      </div>
      <div class="row">
        Your image will be used solely for creating the avatar and will not be
        shared with third parties without your explicit consent. However, we
        reserve the right to use the transformed avatars for marketing purposes
        unless you explicitly request otherwise.
      </div>
    </div>
    <stcBotton
      class="btnstart"
      title="Ok, let's Start"
      targetRoute="/small/gender"
    />
    <stcBotton
      class="btncanel"
      title="No Thanks"
      targetRoute="/small"
      nobg="true"
    />
  </div>
</template>

<style scoped lang="scss">
.title {
  width: 100%;
  position: absolute;
  top: 8%;
  font-size: 60px;
  font-family: "stc-medium";
  color: #fff;
  text-align: center;
  line-height: 1;
}

.content {
  width: 824px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);

  .row {
    font-size: 32px;
    font-family: "stc-light";
    color: #fff;
    margin-bottom: 40px;
  }
}

.btnstart {
  left: 50%;
  top: 76%;
  transform: translate(-50%, 0);
}

.btncanel {
  left: 50%;
  top: 86%;
  transform: translate(-50%, 0);
}
</style>
